<template>
  <div>
    <div class="hotBlog">
        <div v-for="blog in blogs" :key="blog.id" style="cursor: pointer;position: relative;" @click="clickRandom(blog.id)">
          <img :src="blog.imgUrl" alt="" style="display:block;width: 300px;height: 100px;" >
          <span style="position: absolute; bottom: 8px; left: 0;color: #EEEEEE">{{blog.title}}</span>
        </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "HotBlog",
  data(){
    return{
      blogs:[]
    }
  },
  methods:{
    getRandomBlog(){
      this.$http({
        url: '/blog/randomList'
      }).then(({data}) => {
        if (data && data.code === 0) {
          console.log("文章：" + data.data)
          this.blogs = data.data;
        }
      })
    },
    //点击阅读全文按钮
    clickRandom(id) {
      sessionStorage.setItem("webPage",'0');
      sessionStorage.setItem("belongId",id);
      //this.$store.commit(SET_COMMENT_QUERY_PARAMS,{webPage:0,belongId:id}) //设置评论所属页面和文章id
      this.$router.push(`/blogDetail/${id}`)
    },
  },
  mounted(){
    this.getRandomBlog();
  }
}
</script>

<style scoped lang="less">

.hotBlog{

  width: 300px;
  height: 500px;
  background-color: #EEEEEE;
  display: inline-block;
  padding: 0;
  margin: 0;

}
</style>
